<template>
  <div class="music page page_padding">
    <NavigateBar
      :forwardTo="`/music/${musicDetail?.mid}/manage`"
      :showForwardButton="checkBelongTo()"
    />
    <transition-group name="slide-fade">
      <h3 class="tips" v-if="musicDetail"># {{ musicDetail?.file?.fname }}</h3>
      <div class="container" v-if="musicDetail">
        <audio controls :src="`${apis.static}/file/${musicDetail?.file?.fencodedMd5}`" />
      </div>
    </transition-group>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { apis } from "../api";
import NavigateBar from "../components/NavigateBar.vue";

export default {
  components: { NavigateBar },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.id = to.params.id
    })
  },
  setup() {
    const data = reactive({
      id: null,
      musicDetail: null,
    })

    const checkBelongTo = () => {
      return apis.checkBelongTo(data.musicDetail?.file?.uid)
    }

    const getMusicDetail = () => {
      setTimeout(() => {
        if (data.id != null) {
          apis.getMusicById(data.id).then(response => {
            data.musicDetail = response.data.result
          })
        }
      })
    }
    getMusicDetail()
    return { ...toRefs(data), checkBelongTo, apis }
  }
}
</script>

<style scoped lang="less">
.music {
  min-height: 100vh;
}

.container {
}
</style>